<template>
	<view class="province-city-area-select-pop" data-type="省市区选择2">
		<view class="region_poup" v-if="is_show">
			<view class="poup-title border-b">
				<view class="poup-title-left" @click="doCancel()">
					<text>取消</text>
				</view>
				<view class="poup-title-center">
					选择区域
				</view>
				<view class="poup-title-right" @click="doConfirm()">
					确定
				</view>
			</view>
			<!-- <view class="selected_title border-b">
				当前选的是：{{province_name}}{{city_name}}{{area_name}}
			</view> -->
			<view class="region_m">
				<view class="region_m_item border-r">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
						<view class="region_item" @click="select_province(item)" :class="{'item-acticve':province_id == item.id}"
							v-for="(item,index) in province_list">{{item.title}}</view>
					</scroll-view>
				</view>
				<view class="region_m_item border-r">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
						<view class="region_item" @click="select_city(item)" :class="{'item-acticve':city_id == item.id}"
							v-for="(item,index) in city_list">{{item.title}}</view>
					</scroll-view>
				</view>
				<view class="region_m_item">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
						<view class="region_item" @click="select_area(item)" :class="{'item-acticve':area_id == item.id}"
							v-for="(item,index) in area_list">{{item.title}}</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		province,
		city,
		area
	} from "@/config/js/city_data.js"
	export default {
		data() {
			return {
				is_show: false,
				province_list: [],
				city_list: [],
				area_list: [],
				province_id: '',
				city_id: '',
				area_id: '',
				province_name: '',
				city_name: '',
				area_name: '',
			}
		},

		mounted() {
			this.init_data();
		},
		methods: {
			init() {
				this.is_show = true;
			},
			doCancel() {
				// this.$emit('cancel')
				this.is_show = false;
			},
			doConfirm() {
				let arr = {
					name: [],
					id: []
				};

				arr.name = [this.province_name, this.city_name, this.area_name];
				arr.id = [this.province_id, this.city_id, this.area_id];
				this.$emit('confirm', arr)

				this.is_show = false;
			},

			async init_data() {
				let region_id = await this.get_province_list();
				console.log(region_id)
				let region_city_id = await this.get_city_list(region_id);
				await this.get_area_list(region_city_id);
			},
			get_province_list() {
				return new Promise((resolve, reject) => {
					this.province_list = province
					this.province_id = province[0].id
					this.province_name = province[0].title
					resolve(province[0].id);
				})
			},
			get_city_list(region_id) {
				return new Promise((resolve, reject) => {
					let arr = city[region_id] || [];
					for (let i in city) {
						if (i == region_id) {
							arr = city[region_id]
						}
					}
					this.city_list = arr
					this.city_id = arr[0].id
					this.city_name = arr[0].title
					resolve(arr[0].id);

				})
			},
			get_area_list(region_id) {
				let arr = area[region_id] || [];

				this.area_list = arr
				this.area_id = arr[0].id
				this.area_name = arr[0].title
			},
			async select_province(item) {
				this.province_id = item.id
				this.province_name = item.title
				this.city_name = ''
				this.area_name = ''
				this.city_id = ''
				this.area_id = ''
				let region_city_id = await this.get_city_list(item.id);
				await this.get_area_list(region_city_id);
			},
			select_city(item) {
				this.city_id = item.id
				this.city_name = item.title
				this.area_name = ''
				this.area_id = ''

				this.get_area_list(item.id);
			},
			select_area(item) {
				this.area_id = item.id
				this.area_name = item.title

			}

		}
	}
</script>

<style lang="scss" scoped>
	.border-b {
		border-bottom: 1px solid #e0e0e0;
	}

	.item-acticve {
		font-size: 24rpx !important;
		background: #FFFFFF !important;
		color: #272727 !important;
	}

	.poup-title {
		display: flex;
		align-items: center;
		height: 100rpx;
		background: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

	}

	.poup-title-left {
		display: flex;
		width: 120rpx;
		justify-content: center;
		font-size: 28rpx;
	}

	.poup-title-center {
		display: flex;
		flex: 1;
		justify-content: center;
		font-size: 30rpx;
	}

	.poup-title-right {
		display: flex;
		width: 120rpx;
		align-items: center;
		justify-content: center;
		color: #fc871e;
		font-size: 28rpx;
	}

	.region_poup {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.4);



	}

	.selected_title {
		display: flex;
		align-items: center;
		height: 90rpx;
		font-size: 24rpx;
		color: #272727;
		padding: 0 30rpx;
		background: #FFFFFF;
	}

	.region_m {
		display: flex;
		height: 750rpx;
		background: #f5f5f5;

		padding-bottom: 40rpx;
		padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}

	.region_m_item {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
	}

	.region_item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		background: #F5F5F5;
		font-size: 24rpx;
		color: #999999;
	}

	.border-r {
		border-right: 1px solid #e0e0e0;
	}
</style>